<template>
  <el-row style="margin-top: 20px">
    <el-form ref="form" :model="localSearchParams" label-width="80px" :inline="true" size="mini">
      <el-form-item label="角色名称">
        <el-input v-model="localSearchParams.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="localSearchParams.roleKey" placeholder="请输入权限字符" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="localSearchParams.status">
          <el-option label="正常" value="false" />
          <el-option label="停用" value="true" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-date-picker
            v-model="localSearchParams.startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择开始时间"
            style="width: 100%"
          />
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker
            v-model="localSearchParams.endTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择结束时间"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
  export default {
    props: {
      searchParams: {
        type: Object,
        default: () => ({ roleName: '' })
      }
    },
    data() {
      return {
        localSearchParams: { ...this.searchParams }
      }
    },
    watch: {
      searchParams: {
        handler(newVal) {
          this.localSearchParams = { ...newVal }
        },
        deep: true
      }
    },
    methods: {
      /**
       * 提交搜索
       */
      onSubmit() {
        this.$emit('search', this.localSearchParams)
      },
      /**
       * 重置搜索条件
       */
      reset() {
        this.$emit('resetSearch')
      }
    }
  }
</script>

<style></style>
